<template>
  <div class="cate-nav width_1200_auto" :class="{'fixed-show':useClass == 'fixed-show'}">
    <!-- 全部商品分类 -->
    <div
      class="cate-list"
      v-show="showAlways || showFirstList"
      @mouseenter="showFirstList = true"
      @mouseleave="showFirstList = false"
    >
      <div class="nav-con" :class="{'background-white':useClass == 'background-white'}">
        <div
          class="all-categories hover-pointer"
          @mouseenter="showFirstLists"
          @mouseleave="showFirstList = false"
        >
          <div class="toolItem">
            <svg class="icon-third" aria-hidden="true" style="font-size: 5px">
              <use xlink:href="#icon-third-fenlei-copy"></use>
            </svg>
            <span class="toolTitle">所有分类</span>
          </div>
        </div>
      </div>

      <!-- 第一级分类 -->
      <div
        class="nav-side"
        :class="{ 'large-nav': large, 'opacity-nav': opacity }"
        @mouseleave="panel = false"
      >
        <ul>
          <li
            v-for="(item, index) in cateList"
            :key="index"
            @mouseenter="showDetail(index)"
          >
            <span class="nav-side-item topLevel" @click="goCourseList(item.id,'','')">{{
                item.title
              }}</span>
            <span v-for="(second, secIndex) in item.children" :key="secIndex">
              <span v-if="secIndex < 2"> / </span>
              <span
                @click="goCourseList(second.id, second.parentId,'')"
                class="nav-side-item secondLevel"
                v-if="secIndex < 2"
              >{{ second.title }}</span
              >
            </span>
          </li>
        </ul>
      </div>
      <!-- 展开分类 -->
      <div
        class="detail-item-panel"
        :style="{ minHeight: large ? '470px' : '360px' }"
        v-show="panel"
        @mouseenter="panel = true"
        @mouseleave="panel = false"
      >
        <div class="nav-detail-item">
          <template v-for="(item,index) in panelData">
            <span
              @click="goCourseList(item.id,item.parentId,'')"
              v-if="index < 8"
              :key="index"
            >{{ item.title }} ></span>
          </template>
        </div>
        <ul>
          <li
            v-for="(items, index) in panelData"
            :key="index"
            class="detail-item-row"
          >
            <span
              class="detail-item-title"
              @click="goCourseList(items.id, items.parentId,'')"
            >
              {{ items.title }} >
              <span class="glyphicon glyphicon-menu-right"></span>
            </span>
            <div>
              <span
                v-for="(item, subIndex) in items.children"
                @click="goCourseList(item.id, items.id, items.parentId)"
                :key="subIndex"
                class="detail-item"
              >{{ item.title }}</span
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { apiGetCourseCategoryList } from "@/api/course";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
  showAlways: {
    // 总是显示下拉分类
    default: false,
    type: Boolean
  },
  showNavBar: {
    // 显示全部商品分类右侧导航条
    default: false,
    type: Boolean
  },
  hover: {
    default: false,
    type: Boolean
  },
  large: {
    // 是否更高的高度
    default: false,
    type: Boolean
  },
  opacity: {
    // 是否背景透明
    default: false,
    type: Boolean
  },
  useClass: {
    type: null,
    default: ""
  }
});

const panel = ref<boolean>(false);// 二级分类展示
const panelData = ref<any>([]); // 二级分类数据
const showFirstList = ref<boolean>(false); // 始终展示一级列表
const cateList = ref<any>([]); // 商品分类
const navList = ref<any>([]);

function showFirstLists() {
  showFirstList.value = true;
  if (localStorage.getItem("category")) {
    cateList.value = JSON.parse(localStorage.getItem("category"));
  } else {
    getCate();
  }
}

async function getCate() {
  // 获取分类数据
  if (!props.hover) {
    const data: any = await apiGetCourseCategoryList(0);
    cateList.value = data.result;
    // 存放分类信息
    localStorage.setItem("category", JSON.stringify(data.result));
  }
}

function showDetail(index) {
  // 展示全部分类
  panel.value = true;
  panelData.value = cateList.value[index]?.children;
}

function goCourseList(id, secondId, firstId) {
  // 分类共有三级，传全部分类过去
  const arr = [firstId, secondId, id];
  if (!arr[1]) {
    arr.splice(0, 2);
  }
  if (!arr[0]) {
    arr.shift();
  }
  let routerUrl = router.resolve({
    path: "/course/courseList",
    query: { categoryId: arr.toString() }
  });
  window.open(routerUrl.href, "_blank");
}

onMounted(() => {
  if (localStorage.getItem("category")) {
    cateList.value = JSON.parse(localStorage.getItem("category"));
  } else {
    getCate();
  }
});
</script>

<style scoped lang="scss">
.background-white {
  background: #fff;
}

.nav-lis:hover {
  color: #F31947 !important;
  cursor: pointer;

}

.nav-lis {
  width: 103px;
  text-align: center;
  position: relative;
}

.fixed-show {
  margin-top: 0 !important;

  > .nav-con {
    > .all-categories {
      align-items: center !important;
      height: 60px;
      display: inherit;
      justify-content: center;
      padding: 0 !important;
    }
  }
}

.colum {
  height: 14.7px;
  opacity: 1;
  border: 0.7px solid #CBC8C8;
  position: absolute;
  right: 0;
}

.cate-nav {
  position: relative;
  margin: 14px auto 0 auto;
}

/** 商品分类 */
.nav-con {
  height: 46px;
  margin: 0 auto;
  display: flex;

  .all-categories {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-left: 17.4px;
    background: #FFFFFF;
    width: 263.2px;
    padding-top: 15.4px;
    line-height: 20px;
    border-bottom: none;
    font-size: 16.8px;
    font-weight: normal;
    color: #333333;
    letter-spacing: 0px;
  }

  .nav-item {
    width: 914px;
    height: 46px;
    border-radius: 10px;
    background: #FFFFFF;
    margin-left: 10px;
    line-height: 46px;
    overflow: hidden;
    list-style: none;
    display: flex;

    li {
      float: left;
      font-size: 17px;
      font-weight: normal;
      color: #333333;


      &:hover {
        color: #F31947;
      }
    }
  }
}

// 分类列表
.cate-list {
  margin: 0 auto;
  position: absolute;
  z-index: 2;
}

.nav-side {
  width: 263.2px;
  color: #666;
  float: left;
  overflow: hidden;
  padding-top: 15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #fff;
  height: 315px;
}

.large-nav {
  height: 470px;

  ul > li {
    line-height: 20px;
  }
}

.opacity-nav {
  background-color: rgba(0, 0, 0, 0.5);
}

.nav-side ul {
  width: 100%;
  list-style: none;
}

.nav-side li {
  padding: 0 0 0 17.4px;
  font-size: 14px;
  height: 42px;
  line-height: 42px;
}

.nav-side-item:hover {
  cursor: pointer;
  color: #F31947;
}

/*显示商品详细信息*/
.detail-item-panel {
  width: 920px;
  background-color: #fff;
  box-shadow: 0 0 15px #ccc;
  position: absolute;
  top: 0;
  left: 262px;
  z-index: 1000;
  padding: 15px;
}

.nav-detail-item {
  margin-top: 5px;
  margin-bottom: 15px;
  cursor: pointer;
  color: #eee;
}

.nav-detail-item span {
  padding: 6px;
  padding-left: 12px;
  margin-right: 15px;
  font-size: 12px;
  color: #333;
}

.nav-detail-item span:hover {
  background-color: #F31947;
  color: #fff;
}

.detail-item-panel li {
  line-height: 30px;
}

.detail-item-title {
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  color: #555555;
  padding-right: 10px;
  width: 81px;
  text-align: right;
}

.detail-item-title:hover {
  color: #F31947;
}

.detail-item-row {
  display: flex;

  > div {
    flex: 1;
  }
}

.detail-item {
  font-size: 12px;
  padding-left: 8px;
  padding-right: 8px;
  cursor: pointer;
  border-left: 1px solid #ccc;

  &:first-child {
    border: none;
    padding-left: 0;
  }
}

.detail-item:hover {
  color: #F31947;
}

.toolItem {
  display: flex;
  align-items: center;
}

.toolTitle {
  font-size: 16px;
  margin-left: 5px
}

.topLevel {
  font-weight: 700;
  color: black;
}

.secondLevel {
  font-size: 13px;
}
</style>
